<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meat charset="UTF-8" />
    <title>小黑笔记本</title>
    <script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        .xhjsb {
            width: 365px;
            height: 50px;
            text-align: center;
            color: gray;
            background-color: #f5f5f5;
            border: 0px solid #f5f5f5;
            font-size: 30px;
            /* 斜体 */
            font-style: italic;
            position: absolute;
            left: 550px;
            top: 50px;
        }

        div {
            width: 365px;
            border: 1px solid #ccc;
            background-color: #f5f5f5;
            box-shadow: 2px 2px 2px grey;
            position: absolute;
            left: 550px;
            top: 100px;
        }

        #app1 {
            width: 365px;
            height: 230px;
            position: absolute;
            left: 10px;
            top: 10px;
            z-index: -1;
        }

        #app2 {
            width: 365px;
            height: 230px;
            position: absolute;
            left: 20px;
            top: 20px;
            z-index: -2;
        }

        input {
            margin-top: 10px;
            margin-left: 40px;
            width: 290px;
            height: 50px;
            border: 0px;
            font-size: 28px;
            border-bottom: 1px solid #ccc;
            background-color: #f5f5f5;
        }

        li {
            width: 290px;
            height: 30px;
            font-size: 16px;
            margin-top: 10px;
            border-bottom: 1px solid #ccc;
            list-style: none;
            position: relative;
        }

        #show {
            display: inline-block;
            width: 180px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        span {
            color: grey;
            font-size: 12px;
        }

        #del {
            position: absolute;
            right: 10px;
            cursor: pointer;
        }

        #count {
            margin-left: 40px;
        }

        #but {
            cursor: pointer;
            margin-left: 180px;
        }

        #but:hover,
        #del:hover {
            color: #ccc;
        }
    </style>
</head>

<body>
    <div class="xhjsb">小黑记事本</div>
    <div id="app" ref="height1">
        <div id="app1" ref="height2"></div>
        <div id="app2" ref="height3"></div>
        <input type="text" autofocus="autofocus" placeholder="请输入内容！" v-model="currMes" @keyup.enter="setMes" />
        <ul>
            <li v-for="(message,index) in textArr">
                <span id="show">{{index+1}}. {{message}}</span>
                <span id="del" @click="delMes(index)">&times;</span>
            </li>
        </ul>
        <span class="" id="count">共计{{textArr.length}}条笔记</span>
        <span class="" id="but" @click="clear">清空</span>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                textArr: ["吃饭饭", "睡觉觉", "打豆豆"],//保存文本的数组
                index: 0,				//数组索引
                currMes: "",				//当前输入框的值
            },
            methods: {
                setMes: function () {
                    if (this.currMes == "") {
                        //当前值为空不做处理
                    } else {
                        //将当前值加入数组
                        this.textArr.push(this.currMes);
                        this.currMes = "";
                        //调用changHeight()动态改变两个子div高度
                        //在函数里调用另一个函数，被调用函数的this不指向挂在元素，而指向methods
                        //所以把this做变量当参数传给changHeight()
                        var _this = this;
                        this.$options.methods.changHeight(_this);
                    }
                },
                clear: function () {
                    //数组为空是[],字符串为空是""
                    this.textArr = [];
                    this.currMes = "";
                    var _this = this;
                    this.$options.methods.changHeight(_this);
                },
                delMes: function (index) {
                    //用splice(index,length)删除元素
                    //从index位置开始，删除length个元素
                    this.textArr.splice(index, 1);
                    var _this = this;
                    this.$options.methods.changHeight(_this);
                },
                changHeight: function (_this) {
                    //页面刚加载完时，用this.$refs.{name}是取不到值的
                    //所以用this.$nextTick(()=>{})
                    _this.$nextTick(() => {
                        var currHeight = _this.$refs.height1.offsetHeight
                        _this.$refs.height2.style.height = currHeight + "px";
                        _this.$refs.height3.style.height = currHeight + "px";
                    });
                }
            }
        })
    </script>
</body>
</hml>